// 加载HTML模板
async function loadTemplate() {
    const response = await fetch('components/json-modal.html');
    return await response.text();
}

export async function initJsonModal() {
    const template = await loadTemplate();
    document.getElementById('jsonModalContainer').innerHTML = template;
    
    // 获取元素
    const modal = document.getElementById('jsonModal');
    const closeBtn = modal.querySelector('.close-btn');
    const textarea = document.getElementById('jsonInput');
    const lineNumbers = document.getElementById('lineNumbers');
    
    // 关闭按钮事件
    closeBtn.addEventListener('click', () => {
        modal.style.display = 'none';
    });
    
    // 点击模态框外部关闭
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.style.display = 'none';
        }
    });
    
    // 文本框事件
    textarea.addEventListener('input', () => {
        updateLineNumbers(textarea, lineNumbers);
    });
    
    textarea.addEventListener('scroll', () => {
        lineNumbers.scrollTop = textarea.scrollTop;
    });
    
    // 初始化行号
    updateLineNumbers(textarea, lineNumbers);
    
    // 添加按钮事件
    document.getElementById('formatJson').addEventListener('click', formatJson);
    document.getElementById('compressJson').addEventListener('click', compressJson);
    document.getElementById('escapeJson').addEventListener('click', escapeJson);
    document.getElementById('unescapeJson').addEventListener('click', unescapeJson);
    document.getElementById('copyJson').addEventListener('click', copyJson);
}

// 用于跟踪toast状态
let toastTimeout = null;

// 显示提示信息
function showToast(message, type = 'success') {
    // 如果已经有toast在显示，就不显示新的
    if (toastTimeout) {
        return;
    }
    
    // 创建toast元素
    const toast = document.createElement('div');
    toast.className = `toast ${type}`;
    toast.textContent = message;
    document.body.appendChild(toast);
    
    // 显示动画
    setTimeout(() => toast.classList.add('show'), 10);
    
    // 3秒后移除
    toastTimeout = setTimeout(() => {
        toast.classList.remove('show');
        setTimeout(() => {
            document.body.removeChild(toast);
            toastTimeout = null;
        }, 300);
    }, 3000);
}

function formatJson() {
    const textarea = document.getElementById('jsonInput');
    const lineNumbers = document.getElementById('lineNumbers');
    
    try {
        // 预处理JSON字符串，移除末尾多余的逗号
        let jsonStr = textarea.value
            .replace(/,(\s*[}\]])/g, '$1')
            .replace(/,\s*$/g, '');
        
        // 尝试解析JSON
        const json = JSON.parse(jsonStr);
        
        // 格式化输出，使用两个空格缩进
        const formattedJson = JSON.stringify(json, null, 2);
        
        // 确保文本框内容被完全替换
        textarea.value = formattedJson;
        
        // 立即更新行号
        updateLineNumbers(textarea, lineNumbers);
    } catch (e) {
        // 提供更详细的错误信息
        let errorMsg = 'JSON格式错误';
        if (e.message.includes('position')) {
            errorMsg += '：语法错误';
        } else if (e.message.includes('trailing comma')) {
            errorMsg += '：存在多余的逗号';
        } else if (e.message.includes('Unexpected token')) {
            errorMsg += '：意外的字符';
        }
        showToast(errorMsg, 'error');
        console.error('JSON格式化错误:', e);
    }
}

function compressJson() {
    const textarea = document.getElementById('jsonInput');
    const lineNumbers = document.getElementById('lineNumbers');
    
    try {
        // 预处理JSON字符串，移除末尾多余的逗号
        let jsonStr = textarea.value
            .replace(/,(\s*[}\]])/g, '$1')
            .replace(/,\s*$/g, '');
        
        const json = JSON.parse(jsonStr);
        const compressed = JSON.stringify(json);
        
        textarea.value = compressed;
        updateLineNumbers(textarea, lineNumbers);
    } catch (e) {
        showToast('JSON格式错误，请检查语法', 'error');
        console.error('JSON压缩错误:', e);
    }
}

function escapeJson() {
    const textarea = document.getElementById('jsonInput');
    try {
        textarea.value = JSON.stringify(textarea.value);
    } catch (e) {
        showToast('转义失败', 'error');
    }
}

function unescapeJson() {
    const textarea = document.getElementById('jsonInput');
    try {
        const value = textarea.value.trim();
        if (value.startsWith('"') && value.endsWith('"')) {
            textarea.value = JSON.parse(value);
        } else {
            throw new Error('不是有效的JSON字符串');
        }
    } catch (e) {
        showToast('反转义失败', 'error');
    }
}

function copyJson() {
    const textarea = document.getElementById('jsonInput');
    textarea.select();
    document.execCommand('copy');
}

// 更新行号函数
function updateLineNumbers(textarea, lineNumbers) {
    const content = textarea.value;
    // 移除末尾的空行
    const trimmedContent = content.replace(/\n+$/, '');
    // 分割行
    const lines = trimmedContent.split('\n');
    
    // 生成行号HTML
    const lineNumbersHtml = lines.map((_, i) => 
        `<div class="line-number">${i + 1}</div>`
    ).join('');
    
    lineNumbers.innerHTML = lineNumbersHtml;
    
    // 同步滚动位置
    lineNumbers.scrollTop = textarea.scrollTop;
} 